<!--  -->
<template>
  <div class='ordinaryTable'>
    <!--        头部-->
    <div class="resetTitle">
      <div @click="$router.back()" class="imgs"><span class="iconfont icon-fanhui"></span></div>
      <div class="resetText">素人秀</div>
    </div>
    <div style="width: 100%;height: 50px;"></div>
    <div class="editorCon">
      <van-form validate-first @failed="onFailed">
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">店铺</p>
            <van-field disabled
                v-model="shopName"
                name="pattern"
                placeholder="请输入"
            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">商务</p>
            <van-field disabled
                v-model="busName"
                name="pattern"
                placeholder="请输入"
            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">垫付本金</p>
            <van-field
                v-model="form.principal"
                name="pattern"
                placeholder="请输入"
            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">佣金(不含运费)</p>
            <van-field
                v-model="form.commission"
                name="pattern"
                placeholder="请输入"
            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">做单日期</p>
            <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="value"
            placeholder="点击选择时间"
            @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
              <van-datetime-picker
                      v-model="currentDate"
                      type="date"
                      title="选择年月日"
                      :min-date="minDate"
                      :max-date="maxDate"
                      @confirm="onConfirm"
                      @cancel="showPicker = false"
              />
            </van-popup>
          </div>
        </div>
        <div class="formItem">
          <div class="formitemPd uploaderCon">
            <div class="leftText">订单截图</div>
            <div class="uploaderField">
              <van-field name="uploader">
                <template #input>
                  <div class="imgs">
                    <div class="uploadBut">
                      上传
                      <input type="file" ref="upFile" placeholder="的" @change="File()"></input>
                    </div>
                    <div class="preview" ref="preview">
                      <img :src="form.orderPicture"/>
                      <div v-if="previewFlag" class="bg"></div>
                    </div>
                  </div>
                </template>
              </van-field>
              <img/>
            </div>
          </div>
        </div>
        <div class="sub">
          <van-button round block type="info" native-type="submit" @click="submit">添加</van-button>
        </div>
      </van-form>


    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
import headTop from "../../components/base/headTop.vue"
import {Toast} from "vant";
import comApi from "@/api/comapi";
import myTask from "@/api/myTask";

export default {
//import引入的组件需要注入到对象中才能使用
  components: {
    headTop
  },
  data() {

    return {
      value:'',
      value1: '',
      value2: '',
      storeval: "",
      Bsieks: '',
      previewFlag: true,
      storeFlag: false,
      pattern: /\d{6}/,
      shopName:'',
      busName:'',
      id:'',
      form:{
        id:'',
        principal:'',
        commission:'',
        doDate:'',
        orderPicture:''
      },
      fileType: ['image/png', 'image/jpeg'],
      showPicker: false,
      minDate: new Date(2022,0,1),
      maxDate: new Date(3030,1,1),
      currentDate: new Date(),
    };
  },
//监听属性 类似于data概念
  computed: {},
//监控data中的数据变化
  watch: {},

  methods: {
    iconxiala() {
      this.storeFlag = !this.storeFlag
    },
    clickstoreval(event) {
      this.storeval = event.target.innerHTML
      this.storeFlag = false
    },
    File() {
      let file = this.$refs.upFile.files[0];
      if (this.fileType.indexOf(file.type) < 0) {
        Toast('请上传 jpg 格式图片');
        return false;
      }
      let formData = new FormData();
      formData.append("file", file)
      comApi.fileUpload(formData).then(res => {
        this.previewFlag = false
        this.form.orderPicture = res.data
      })
    },

    onFailed(errorInfo) {
      console.log(666)
      console.log('failed', errorInfo);
    },
    submit(){
      // 表单校验
      console.log(this.form);
      let m = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;


      if (!m.test(this.form.principal)) {
        Toast('请填写正确本金')
        return
      }
      if (!m.test(this.form.commission)) {
        Toast('请填写正确佣金')
        return
      }
      if (this.form.doDate.length < 2) {
        Toast('请填写日期')
        return
      }

      if (this.form.weixi < 2) {
        Toast('请上传订单图片')
        return
      }
      if (this.form.orderPicture.length < 2) {
        Toast('请上传订单图片')

        return
      }
      myTask.submitSuRenxiu(this.form).then(res=>{
        Toast(res.message)
        this.$router.back()
      })
    },
    onConfirm(time) {
      var y = time.getFullYear()
      var m = time.getMonth()+1
      var r = time.getDate()
      this.form.doDate = y+"-"+m+"-"+r
      this.value = y+"-"+m+"-"+r;
      this.showPicker = false;
    },


  },

  created() {
    this.form.id = this.$route.query.id
    this.shopName = this.$route.query.shopName
    this.busName = this.$route.query.busName
      let nowdata=new Date();
      let year=nowdata.getFullYear();
      let month=nowdata.getMonth()+1;
      let date=nowdata.getDate();
      let nowtime=year+"-";
      if(month<10){
        nowtime+="0"
      };
      nowtime+=month+"-";
      if(date<10){
        nowtime+="0"
      };
      nowtime+=date;
      this.currentDate=nowtime
      this.value = nowtime

  },

  mounted() {

  },
  beforeCreate() {
  },
  beforeMount() {
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.ordinaryTable {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
  font-size: 14px;
}

.editorCon {
  .item {
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    background: #ffffff;

    .titleLeft {
      line-height: 30px;
      color: #949ba2;
    }

    .right {
      flex: 1;
      padding-left: 35px;

      input {
        height: 30px;
        width: 100%;
        background: #f8f8f8;
        color: black;
      }

    }

    .switch {
      display: flex;
      align-items: center;
    }
  }

  .itemStore {
    .rightstore {
      .storeChoose {
        display: flex;
        align-items: center;
        /*line-height: 30px;*/
        position: relative;

        .input {
          flex: 1;
          /*height: 30px;*/
          color: black;
          background: #ffffff;
        }

        /deep/ .van-cell::after {
          border-bottom: none;
        }

        .iconxiala {
          padding: 10px;

          span {
            font-size: 14px;
          }
        }

        .uls {
          width: 100%;
          height: 200px;
          position: absolute;
          left: 0;
          top: 50px;
          border-radius: 5px;
          box-shadow: 0 0 7px 3px #e2e2e2;
          z-index: 100;
          background: white;

          ul {
            width: 100%;
            height: 200px;
            overflow-y: scroll;

            li {
              padding: 10px;

              .lis {
                border-bottom: 1px solid #e2e2e2;
              }
            }
          }
        }

      }
    }
  }

  .storeLicur::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -2.5px;
    border-bottom: 5px solid white;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }

  .formItem {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    background: #ffffff;

    .formItemBg {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      padding: 0 10px;
      line-height: 30px;

      /deep/ .van-field {
        flex: 1;
      }

      .nameTitle {
        width: 100px;
        color: #949ba2;
        line-height: 30px;
      }

      .ipt {
        flex: 1;
        padding-left: 20px;

        .select {
          width: 100%;
          height: 30px;
          border: none;

          option {
            height: 30px;
          }
        }
      }

    }

    .uploaderCon {
      display: flex;
      align-items: center;
      padding: 0px 10px;

      /deep/ .van-field__label {
        color: #9e989f !important;
      }

      .leftText {
        width: 86px;
        color: #949ba2;
      }

      .uploaderField {
        flex: 1;
        position: relative;

        .imgs {
          .uploadBut {
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding: 0 20px;
            margin: 0 0 15px 30px;
            color: black;
            background: #f8f5be;
            /*background: #d4bdd9;*/
            border-radius: 20px;
            position: relative;
            overflow: hidden;

            input {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 2px;
              left: -10px;
              opacity: 0;
            }

          }

          .preview {
            width: 178px;
            height: 178px;
            margin-left: 20px;
            position: relative;

            img {
              width: 178px;
              height: 178px;
              border: none;
              outline: none;
            }

            .bg {
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: #ffffff;
            }

          }
        }
      }
    }

  }

  .sub {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding-bottom: 10px;

    .van-button {
      width: 95%;
      margin: 0 auto;
      /*background: #d4bdd9;*/
      background:#f8f5be;
      color: black;
      border: none;
    }
  }
}
.resetTitle {
  width: 100%;
  padding: 15px 0;
  position: fixed;
  top: 0;
  left: 0;
  background: #f8f8f8;
  z-index: 10001;

  .imgs {
    position: absolute;
    left: 10px;
    top: 13px;

    span {
      font-size: 25px;
    }
  }

  .resetText {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
}
</style>
